import React, { useState, useEffect } from 'react';
import { NavLink, Route, Redirect } from 'react-router-dom';
import Crumbs from '../../components/crumbs/index';
import './scss/basic.scss'
import { Input, Select, Button, Popover, Modal } from 'antd';
const { Option } = Select;

const Basic = (props) => {
    const [CrumbsList] = useState([
        {
            name: '优惠管理',
        },
        {
            name: '基本功能',
            url: '/basic',
        },
    ]);


    return (
        <div>
            <Redirect path="/basic" to='/basic/lj' />
            <Crumbs CrumbsList={CrumbsList} />
            <div className='basic_topBox'>
                <NavLink className='basic_tab' activeClassName='active_tab' to="/basic/lj">满额立减</NavLink>
                <NavLink className='basic_tab' activeClassName='active_tab' to="/basic/by">满额包邮</NavLink>
                <NavLink className='basic_tab' activeClassName='active_tab' to="/basic/ms">充值满送</NavLink>
            </div>
            <div>
                <Route path='/basic/lj' component={() => {

                    const [tran, setTran] = useState("")
                    const [minus, setMinus] = useState("")
                    const useTran = (event) => {
                        setTran(event.target.value);
                    }
                    const useMinus = (event) => {
                        setMinus(event.target.value);
                    }

                    return (
                        <div className='lj_box'>
                            <div className='lj_tit'>当前位置：<a href="">满额立减设置</a></div>
                            <div className='lj_cont'>
                                <div style={{ marginBottom: 16 }} className='lj_contFrom'>
                                    <div style={{ width: "40%", display: "flex" }}>
                                        <div className='lj_ts' > 单笔订单满</div>
                                        <input type="text" onChange={useTran} name="" id="" value={tran} />
                                        <div className='lj_ts'>元</div>
                                    </div>
                                    <div style={{ width: "40%", display: "flex" }}>
                                        <div className='lj_ts' style={{ borderLeft: "none" }} >立减</div>
                                        <input type="text" name="" id="" onChange={useMinus} name="" id="" value={minus} />
                                        <div className='lj_ts'>元</div>
                                    </div>
                                </div>
                                <div>
                                    <Button onClick={() => { }}>+增加优惠项</Button>
                                    <div className='lj_tishi'>
                                        两项都填写才能生效
                                    </div>
                                </div>
                                <div className='lj_baocun'>
                                    <Button onClick={() => {
                                        if (tran && minus) {
                                            console.log(tran, minus);
                                        }
                                    }} type="primary">保存设置</Button>
                                </div>
                            </div>
                        </div>
                    )
                }} />
                <Route path='/basic/by' component={() => {
                    const [isModalVisible, setIsModalVisible] = useState(false);
                    const showModal = () => {
                        setIsModalVisible(true);
                    };
                    const handleOk = () => {
                        setIsModalVisible(false);
                    };
                    const handleCancel = () => {
                        setIsModalVisible(false);
                    };
                    return (
                        <div className='by_box'>
                            <div className='by_title'>
                                <span>满额包邮</span>
                                <p>开启满包邮, 订单总金额超过多少可以包邮</p>
                            </div>
                            <div className='by_cont'>
                                <div className='by_contBox'>
                                    <div className='by_enough'>
                                        <span>单笔订单满</span>
                                        <input type="text" name="" id="" />
                                        <div className='by_yuan'>元</div>
                                    </div>
                                    <div className='by_enough'>
                                        <span>否则支付邮费</span>
                                        <input type="text" name="" id="" />
                                        <div className='by_yuan'>元</div>
                                    </div>
                                </div>
                            </div>
                            <div className='by_ts'>
                                <span>如果开启满额包邮，设置0为全场包邮</span>
                            </div>
                            <div>
                                <span>不参加的地区</span>
                                <div>
                                    <span></span>
                                    <div></div>
                                    <div>
                                        <Button onClick={showModal}>
                                            设置不包邮地区邮费
                                        </Button>
                                        <Modal title="邮费设置" width='1050px' visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                                            <div className='yfsz_box'>
                                                <div className='yfsz_boxSon'>
                                                    <span>北京</span>
                                                    <div className='yfsz_sonItem'>
                                                        <input type="text" name="" id="" />
                                                        <div className='yfsz_yuan'>元</div>
                                                    </div>
                                                </div>
                                                <div className='yfsz_boxSon'>
                                                    <span>黑龙江</span>
                                                    <div className='yfsz_sonItem'>
                                                        <input type="text" name="" id="" />
                                                        <div className='yfsz_yuan'>元</div>
                                                    </div>
                                                </div>
                                                <div className='yfsz_boxSon'>
                                                    <span>西藏</span>
                                                    <div className='yfsz_sonItem'>
                                                        <input type="text" name="" id="" />
                                                        <div className='yfsz_yuan'>元</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </Modal>
                                    </div>
                                </div>


                            </div>
                            <div className='choose_box'>
                                <span>不参加包邮的商品</span>
                                <div className='choose_boxSon'>
                                    <input type="text" name="" id="" />
                                    <button>选择商品</button>
                                </div>
                            </div>
                            <div>
                                <button>保存设置</button>
                            </div>
                        </div>
                    )
                }} />
                <Route path='/basic/ms' component={() => {
                    return (
                        <div className='ms_box'>
                            <div >
                                <span>满</span>
                                <input type="text" name="" id="" />
                                <span>否则支付邮费</span>
                                <input type="text" name="" id="" />
                                <div className='by_yuan'>元</div>
                                <div>×</div>
                            </div>
                            <div>+增加优惠项</div>
                            <div>保存设置</div>
                        </div>
                    )
                }} />
            </div>
        </div>
    )
}

export default Basic;